import React from "react";
import { FormControl } from "../../utils/form/FormControl";
import { Utils } from "../../utils/utils";




export const useFormItemInit = (formControl: FormControl, className = '', style: React.CSSProperties = {}) => {

    const [value, setValue] = React.useState(formControl.value);
    /** 显示值 */
    const [displayValue, setDisplayValue] = React.useState(formControl.showValue || formControl.value);
    const [valid, setValid] = React.useState(formControl.valid);
    const [readonly, setReadonly] = React.useState(formControl.readonly);
    const [hidden, setHidden] = React.useState(formControl.hidden);
    const [outerClassName, setOuterClassName] = React.useState(`${className} ${formControl.hidden ? 'hidden' : ''}`);
    const [options, setOptions] = React.useState(formControl.options ?? []);
    const [placeholder, setPlaceholder] = React.useState(formControl.placeholder);
    /** 外层样式 */
    const [outerStyle, setOuterStyle] = React.useState<React.CSSProperties>({ ...style, ...formControl.controlData?.style });
    /** 标签 */
    const [label, setLabel] = React.useState(formControl.label ?? '');
    /** 标签样式 */
    const [labelStyle, setLabelStyle] = React.useState<React.CSSProperties>({ ...formControl.controlData?.labelStyle ?? {} });
    /** 标签样式 */
    const [selectorStyle, setSelectorStyle] = React.useState<React.CSSProperties>({ ...formControl.selectorStyle ?? {} });
    /** 布局 */
    const [layout, setLayout] = React.useState<string>(formControl.controlData?.layout ?? 'horizontal');
    /** 显示错误 */
    const [showError, setShowError] = React.useState(false);
    /** 颜色 */
    const [color, setColor] = React.useState(formControl.color);
    // 显示错误 监控
    React.useEffect(() => {
        if (showError && formControl.valid === false) {
            setShowError(true);
        } else {
            setShowError(false);
        }
    }, [showError, valid]);

    React.useEffect(() => {
        formatDisplayValue(value);
    }, []);

    /** 设置显示值 */
    const formatDisplayValue = (val: any) => {
        let v: any = null;
        if (formControl.controlData.dataflow) {
            v = formControl.showValue || formControl.value;
        }
        else if (formControl.selector === 'cascadePicker' || formControl.selector === 'cascader') {
            v = formControl.cascaderLable;
        } else if (formControl.selector === 'currency') {
            v = Utils.moneyFormat(+val, '', 2);
        } else {
            v = val;
        }
        setDisplayValue(v);
        return v
    }

    // 各种监控
    React.useEffect(() => {

        formControl.setShowError = setShowError;

        /** 验证监控 */
        formControl.validChange(res => {
            setValid(res);
        });
        // value 监控
        formControl.valueChange(val => {
            setValue(val);
            formatDisplayValue(val);
        });
        // readonly 监控
        formControl.readonlyChange(val => {
            setReadonly(val);
        });
        // hidden 监控
        formControl.hiddenChange(val => {
            const className1 = `${className} ${val ? 'hidden' : ''}`;
            setOuterClassName(className1);
        });
        // options 监控
        formControl.optionsChange(options => {
            setOptions(options);
        });
        // placeholder 监控
        formControl.placeholderChange(val => {
            setPlaceholder(val);
        });
        // 标签样式 监控
        formControl.labelStyleChange(val => {
            setLabelStyle(val);
        });
        // 选择器样式 监控
        formControl.selectorStyleChange(val => {
            setSelectorStyle(val);
        });
        // 标签 监控
        formControl.labelChange(val => {
            setLabel(val);
        });
        /** 显示值 监控 */
        formControl.showValueChange(val => {
            setDisplayValue(val);
        });
        // 颜色 监控
        formControl.colorChange(val => {
            setColor(val);
        });
    }, []);

    React.useEffect(() => {
        setValue(formControl.value);
    }, [formControl]);

    return {
        value, setValue,
        valid, setValid,
        readonly, setReadonly,
        hidden, setHidden,
        outerClassName, setOuterClassName,
        options, setOptions,
        layout, setLayout,
        placeholder, setPlaceholder,
        showError, setShowError,
        outerStyle, setOuterStyle,
        labelStyle, setLabelStyle,
        label, setLabel,
        displayValue, setDisplayValue,
        selectorStyle, setSelectorStyle,
        color, setColor,
    };
}